<template>
	<div class="index">
		<Header></Header>
		<!-- 内容 -->
		<div class="w65 ma">
			<!-- 面包屑 -->
			<breadcrumb></breadcrumb>
		</div>
		<div class="conent-top">
			<div class="fwb fz105 pb1">{{ getDetails.title }}</div>
			<div class="c999 fz05 pb1">关键字：{{ getDetails.intro }}</div>
			<div class="w100 tac"><img style="width: 100%; height: 23rem;" :src="url + getDetails.image" alt="" /></div>
			<div class="pt2">
				<span class="fz05">简单介绍</span>
				<div class="fz05 h26" v-html="getDetails.content">{{ getDetails.content }}</div>
			</div>
			<div class="fz05 w100 tar">2021-05-17</div>
			<div>
				<el-row :gutter="20">
					<el-col :span="4" :offset="8" class="fz05 c14a fwb cp">
						<span v-if="ups == ''">别翻了~~~</span>
						<span v-else @click="upPiece(up.id)">上一篇 {{ up.title }}</span>
					</el-col>
					<el-col :span="4" :offset="0" class="fz05 c14a fwb cp">
						<span v-if="nexts == ''">别翻了~~~</span>
						<span v-else @click="nextPiece(next.id)">下一篇 {{ next.title }}</span>
					</el-col>
				</el-row>
			</div>
		</div>
		<!-- 底部 -->
		<Footer></Footer>
	</div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb .vue';
import { standardDetails, standardDetailsTurn } from '@/api/resourceCenter.js';
export default {
	name: '',
	components: {
		breadcrumb
	},
	data() {
		return {
			getDetails: {},
			up: {},
			ups:'',
			nexts:'',
			next: {}
		};
	},
	created() {
		standardDetails({ id: this.$route.query.id }).then(res => {
			this.getDetails = res.data.arr;
			this.ups = res.data.up;
			this.up = res.data.up;
			this.nexts = res.data.next;
			this.next = res.data.next;
		});
	},
	methods: {
		upPiece(val) {
			this.turnPiece(val);
		},
		nextPiece(val) {
			this.turnPiece(val);
		},
		turnPiece(val) {
			standardDetailsTurn({ id: val }).then(res => {
				this.getDetails = res.data.arr;
				this.ups = res.data.up;
				this.up = res.data.up;
				this.nexts = res.data.next;
				this.next = res.data.next;
			});
		}
	}
};
</script>

<style scoped lang="scss">
.conent-top {
	width: 65%;
	height: 65rem;
	margin: auto;
	background-color: #ffffff;
	padding: 1rem;
	box-sizing: border-box;
}
</style>
